<template>
  <div class="list">
    <div class="item" v-for="item in data" :style="{width:width+'px',height:height+'px'}" :key="item.id">
      <video :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+item.url"  controls loop
             style="width: 100%; height: 100%; object-fit: cover;"></video>
      <!--        <p class="name">{{item.name}}</p>-->

      <p class="state" v-show="item.state && item.state!=='正常'" v-if="item['type']==='camera'">
        <span class="send" @click="item['fn']">{{item.state}}</span>
      </p>
      <p class="state" v-if="item['type']==='event'">
        {{item.state}}
      </p>
    </div>
  </div>
</template>

<script>
    export default {
        name: "videoList_sub",
      props:['data'],
      data(){
          return{
            webCfg:WebCfg,
            width: 0,
            height: 0,

          }
      },
      created(){
        this.init();
      },
      methods:{
        init() {
          const W = window.screen.width;
          this.width = W / 4 ;
          this.height = W / 4 * 9 / 16 - 20 ;
        }
      }
    }
</script>

<style scoped>

</style>
